<template>
	<view class="item" @click="itemClick">
		<view class="uni-flex uni-justify-between uni-align-center top">
			<view class="uni-flex uni-align-center">
				<text class="text1">{{ cardData.title }}</text>
				<text class="text2">{{ cardData.orderTypeName }}</text>
			</view>
			<text class="text3"
				v-if="cardData.orderStatusName==='订单完成'||cardData.orderStatusName==='订单关闭'||cardData.orderStatusName==='待评价'||cardData.orderStatusName==='订单取消'||cardData.orderStatusName==='退款/售后'">{{ cardData.orderStatusName }}</text>
			<text class="text4"
				v-if="cardData.orderStatusName==='待服务'||cardData.orderStatusName==='服务中'">{{ cardData.orderStatusName }}</text>

			<text class="text5" v-if="cardData.orderStatusName==='待付款'">{{ cardData.orderStatusName }}</text>
		</view>
		<view class="uni-flex content">
			<!-- <image :src="`${$ImgBaseUrl}details_info.png`" mode="aspectFill"></image> -->
			<image :src="cardData.itemImg" mode="aspectFill"></image>
			<view class="uni-flex-column info">
				<text class="title">{{ cardData.itemName }}</text>
				<text class="des">{{ cardData.itemDesc }}</text>
				<text class="num">x {{ cardData.itemCount }}</text>
			</view>
			<text class="price">¥{{ cardData.totalAmount }}</text>
		</view>
		<view class="uni-flex total">
			<text class="text1">实付款</text>
			<text class="text2">¥{{ cardData.paymentAmount }}</text>
		</view>
		<slot name="bottom"></slot>
		<view class="uni-flex uni-align-center uni-justify-between menu">
			<!-- <l-popover>
        <text class="more">更多</text>
        <template #content>
          <view class="uni-flex-column">
            <text class="power-text" @click="handlePower(0)">申请开票</text>
            <text class="power-text" @click="handlePower(1)">删除订单</text>
          </view>
        </template>
      </l-popover> -->

			<view>
				<!-- <text class="button1" @click.stop="handleAfterSale(item)">申请售后</text> -->
				<!--  <text class="button1" @click.stop="handleCancel(item)">取消订单</text>
        <text class="button1" @click.stop="handleEvaluate(item)">去评价</text>
        <text class="button1" @click.stop="handleRefund(item)">申请退款</text>
        <text class="button2" @click.stop="handlePay(item)">去付款</text> -->
				<!-- <text class="button2">再来一单</text> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		cardData: {
			type: Object,
			default: () => {}
		}
	});

	const emit = defineEmits(["itemClick"]);
	const itemClick = () => {
		emit("itemClick");
	};
</script>

<style lang="scss" scoped>
	.item {
		background: #ffffff;
		border-radius: 20px;
		padding: 31rpx 25rpx;
		margin: 24rpx 24rpx 0 24rpx;

		.top {
			.text1 {
				font-size: 34rpx;
				color: #333333;
				display: inline-block;
				max-width: 300rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.text2 {
				font-weight: 400;
				font-size: 24rpx;
				color: #2f80ed;
				background: #e5f0ff;
				border-radius: 4px;
				padding: 2rpx 9rpx;
				margin-left: 14rpx;
			}

			.text3 {
				font-weight: 500;
				font-size: 34rpx;
				color: #999999;
			}

			.text4 {
				font-weight: 500;
				font-size: 34rpx;
				color: #2F80ED;
			}

			.text5 {
				font-weight: 500;
				font-size: 34rpx;
				color: #FF6A47;
			}

		}

		.content {
			margin-top: 30rpx;

			image {
				width: 137rpx;
				height: 137rpx;
				border-radius: 10rpx;
			}

			.info {
				flex: 1;
				margin-left: 24rpx;

				.title {
					font-weight: 500;
					font-size: 34rpx;
					color: #333333;
					max-width: 300rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.des {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-top: 5rpx;
					max-width: 350rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.num {
					font-size: 28rpx;
					color: #666666;
					margin-top: 12rpx;
				}
			}

			.price {
				font-weight: 500;
				font-size: 34rpx;
				color: #333333;
			}
		}

		.total {
			margin-top: 20rpx;
			justify-content: flex-end;
			align-items: center;

			.text1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				margin-right: 10rpx;
			}

			.text2 {
				font-weight: 500;
				font-size: 34rpx;
				color: #333333;
			}
		}

		// .menu {
		//   margin-top: 30rpx;
		//   .more {
		//     font-size: 24rpx;
		//     color: #999999;
		//   }
		//   .power-text {
		//     font-size: 22rpx;
		//     color: #333333;
		//     &:not(:last-child) {
		//       border-bottom: 1rpx solid #e2e2e2;
		//     }
		//   }
		//   .button1 {
		//     font-size: 24rpx;
		//     color: #333333;
		//     padding: 12rpx 32rpx;
		//     border: 1px solid #999999;
		//     border-radius: 28rpx;
		//     margin-left: 24rpx;
		//   }
		//   .button2 {
		//     font-size: 24rpx;
		//     color: #ffffff;
		//     padding: 12rpx 32rpx;
		//     background: #2f80ed;
		//     border-radius: 28rpx;
		//     margin-left: 24rpx;
		//   }
		// }
	}
</style>